<template>
  <div class="four_s" >
    <div @:click="go(el)" class="four_son" v-for="(el) in arr.slice(1,3)" >
      <!-- @:click="getmsg_4(el)" -->
      <!-- @:click="fn(el)"  路由跳转 医生评论详情 -->
      <div className="f_s_flex">
        <div class="img_f">问</div>
        <div class="img_right">
          {{ el.prob }}
          <!-- 网络请求数据 -->
        </div>
      </div>

      <div className="f_s_flex f_s_sec">
        <img  :src="'http://localhost:7001/public/'+el.img" class="img_f img_s">
        <div class="answer">
          <div className="sec_top">
            <span> {{ el.title }} </span>
            <span style="font-size: 13px; opacity: 0.5"> {{ el.type }} </span>
            <span style="font-size: 13px; opacity: 0.5"> {{ el.updata}} </span>
            <span style="font-size: 13px; opacity: 0.5">  {{ el.type2 }} </span>
          </div>
          <div className="sec_center">
            你好，稍等片刻，正在给你整理回复内容和治疗意见，稍后会补充回复你，
            暂时不需要再次提问以免浪费提问机会。
            {{ }}
          </div>
          <div className="sec_foot">
            已帮助 {{ "1" }} 人
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted,onBeforeMount } from "vue"
import { useRouter } from "vue-router";
import axios from "axios"
import { Goblet } from "@element-plus/icons-vue";
let router = useRouter()

let arr: any = ref([1,2]),arr2: any = ref([1,2])
onBeforeMount(async()=>{
  let re: any = await axios("/path/search", { params: { sec: true, table: 'promble' }})
  arr.value = re.data.sql
console.log(arr.value)

})
setInterval(async () => {
  let re: any = await axios("/path/search", { params: { sec: true, table: 'promble' }})
  arr.value = re.data.sql
},1000000)


function go(x){
  console.log("home_grandson/four_son.vue  router.push 问题详情页路由",x)
}
</script>

<style scoped  lang="scss">
* {
  margin: 0;
  padding: 0;
}

.four_s {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.four_son {
  width: 548px;
  height: 300px;
  border: 1px solid #e8e9eb;
  border-radius: 5px;

  .f_s_flex {
    width: 508px;
    height: 72px;
    padding: 24px 20px;

    display: flex;
    justify-content: space-between;

    .img_f {
      width: 50px;
      height: 50px;
      font-size: 24px;
      font-weight: 500;
      border-radius: 25px;
      text-align: center;
      line-height: 50px;
      background-color: #E0FAF4;
      color: #00c792;
    }

    .img_s {
      width: 50px;
      height: 50px;
      background-image: url("https://img1.dxycdn.com/2021/1210/222/6304801848469899153-157.png");
      background-size: 50px 50px;
    }

    .img_right {
      width: 446px;
      margin-left: 12px;

      overflow: hidden;
      display: -webkit-box;
      line-height: 24px;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
  }

  .f_s_sec {
    min-height: 108px;
    background-color: #FBFBFB;
  }
}

.answer {
  width: 446px;
  margin-left: 12px;

  div {
    margin-bottom: 12px;
  }

  .sec_top {
    span {
      margin-right: 8px;
    }
  }

  .sec_center {
    overflow: hidden;
    display: -webkit-box;
    line-height: 24px;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .sec_foot {
    color: #FFB34C;
    font-size: 13px;
  }
}
</style>